<template>
  <div v-loading="loading" class="order_box" element-loading-text="拼命加载中...">
    <div class="head">
      <div class="full">
        <SvgIcon color="#1890ff" icon="order-approve-outline" size="32" style="margin-right: 5px;"></SvgIcon>
        <div class="text">
          <div>订单编号：{{ infoData.order_no || '-' }}</div>
        </div>
      </div>
      <el-space :size="8" class="space-wrap" wrap>
        <div class="space-item">
          <div class="title">订单状态</div>
          <DictTag v-model="infoData.status" :circle="false" dict-type="shop_order_status"/>
        </div>
        <div class="space-item">
          <div class="title">支付状态</div>
          <DictTag v-model="infoData.payment_status" :circle="false" dict-type="shop_order_payment_status"/>
        </div>
        <div class="space-item">
          <div class="title">支付方式</div>
          <DictTag v-if="infoData.payment_type > 0" v-model="infoData.payment_type" :circle="false" dict-type="shop_order_payment_type"/>
          <span v-else>-</span>
        </div>
        <div class="space-item">
          <div class="title">支付时间</div>
          <div>{{ infoData.payment_success_time || '-' }}</div>
        </div>
      </el-space>
    </div>

    <el-tabs>
      <el-tab-pane label="订单信息">
        <el-card class="content-card">
          <el-descriptions :column="responsiveState.column" title="用户信息">
            <el-descriptions-item :width="itemWidth" label="用户编号：">
              <span>{{ userInfo.id || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="用户账号：">
              <span>{{ userInfo.account || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="用户昵称：">
              <span>{{ userInfo.nickname || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-divider border-style="dashed"/>

        <el-card class="content-card">
          <el-descriptions :column="responsiveState.column" title="订单信息">
            <el-descriptions-item :width="itemWidth" label="订单金额：">
              <span>￥{{ numeral(infoData.total_price).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="花朵金额：">
              <span>{{ numeral(infoData.total_price_integral).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="现金支付：">
              <span>{{ numeral(infoData.total_price_cash).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="消费券抵扣：">
              <span>{{ numeral(infoData.coupon_payed).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="消费金抵扣：">
              <span>{{ numeral(infoData.consume_gold_payed).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="补贴金额：">
              <span>{{ numeral(infoData.total_subsidy_amount).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="下单时间：">
              <span>{{ infoData.create_time || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="支付状态：">
              <DictTag v-model="infoData.status" :circle="false" dict-type="shop_order_status"/>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="支付方式：">
              <DictTag v-if="infoData.payment_type > 0" v-model="infoData.payment_type" :circle="false" dict-type="shop_order_payment_type"/>
              <span v-else>-</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="支付时间：">
              <span>{{ infoData.payment_success_time || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-divider border-style="dashed"/>

        <el-card class="content-card">
          <el-descriptions :column="1" title="收货信息">
            <el-descriptions-item :width="itemWidth" label="收货人：">
              <span>{{ infoData.addr_name || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="联系方式：">
              <span>{{ infoData.addr_phone || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="收货地址：">
              <span>{{ infoData.addr_detail || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="用户备注：">
              <span>{{ infoData.user_note || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-divider border-style="dashed"/>

        <el-card class="content-card">
          <el-descriptions :column="responsiveState.column" title="物流信息">
            <el-descriptions-item :width="itemWidth" label="快递公司：">
              <span>{{ infoData.shipping_name || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="快递单号：">
              <span>{{ infoData.shipping_code || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="发货时间：">
              <span>{{ infoData.shipping_time || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="商品信息">
        <el-table :data="itemList" fit highlight-current-row>
          <el-table-column align="left" label="商品信息" min-width="300">
            <template #default="scope">
              <div class="product">
                <div class="image">
                  <el-image :src="scope.row.goods_cover_url"/>
                </div>
                <div class="title">{{ scope.row.goods_name }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" label="售价" min-width="120">
            <template #default="scope">
              <span>{{ numeral(scope.row.price).format('0.00') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="数量" min-width="110">
            <template #default="scope">
              <span>{{ scope.row.quantity }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="小计" min-width="120">
            <template #default="scope">
              <span>{{ numeral(scope.row.total_price).format('0.00') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { SvgIcon } from '@/components/icon';
import { useResponsiveState } from '@/hooks/use-responsive-state.ts';
import { onMounted, ref } from 'vue';
import { defUserInfoData } from '@/api/api-user.ts';
import { OrderData, OrderItemData } from '@/views/shop/order/data.ts';
import { goodsOrderInfo } from '@/api/api-shop.ts';
import numeral from 'numeral';
import { DictTag } from '@/components/dict-tag';

const props = defineProps({
  id: {
    type: Number,
    required: true
  }
});
const loading = ref(false);
const itemWidth = ref('130px')
const responsiveState = useResponsiveState(
    {
      ['lg']: {column: 3},
      ['sm']: {column: 2},
      ['xs']: {column: 1},
    },
    {column: 3,},
);

/** 初始化 **/
onMounted(async () => {
  handleRefresh();
})

/** 用户信息 */
const userInfo = ref({...defUserInfoData});
/** 订单信息 */
const defOrderInfoData: OrderData = <OrderData>{};
const infoData = ref({...defOrderInfoData});
/** 订单项目数据 */
const itemList = ref<OrderItemData[]>([]);

/** 刷新数据 */
const handleRefresh = () => {
  userInfo.value = {...defUserInfoData};
  infoData.value = {...defOrderInfoData};
  itemList.value = [];
};

/** 加载数据 */
const initData = (id: number) => {
  if (!id || id <= 0) {
    return
  }
  loading.value = true;
  goodsOrderInfo(id).then(res => {
    const {order_info, user_info, item_list} = res.data;
    infoData.value = order_info;
    userInfo.value = user_info;
    itemList.value = item_list;
  }).finally(() => loading.value = false)
};

defineExpose({initData})
</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions__label {
    margin-right: 0;
    display: inline-block;
    min-width: 80px;
    vertical-align: top;
  }

  .el-descriptions__cell {
    vertical-align: top;
    font-size: 13px !important;
  }

  .el-divider--horizontal {
    margin: 8px 0;
  }

  .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: 6px;
  }
}

.order_box {
  .head {
    padding: 15px;
  }

  .full {
    display: flex;

    .text {
      align-self: center;
      flex: 1;
      padding-left: 6px;
      font-size: 13px;
    }
  }

  .space-wrap {
    margin-top: 18px;
    width: 100%;
    text-align: center;

    .space-item {
      width: 10rem;
      font-size: 14px;
      line-height: 14px;
      color: var(--el-text-color-primary);

      .title {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 13px;
        color: var(--el-color-info);
      }
    }
  }
}

.product {
  .image {
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
  }

  .title {
    width: calc(100% - 60px);
    padding-left: 6px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    height: 1.3rem;
    line-height: 1.2rem;
  }
}
</style>
